<template>
    <div class="article-index">
        <!-- 导航栏 -->
        <van-nav-bar
        class="app-nav-bar"
        title="文章详情"
        left-arrow	
        @click-left="$router.back()"
        >
        </van-nav-bar>
        <!-- 文章标题 -->
        <div class="title">{{article.title}}</div>
        <!-- 头像区域 -->
       <van-cell title="单元格" center class="user-info"> 
           <van-image
            round
            slot="icon"
            width="44"
            height="44"
            class="avatar"
            :src= "article.aut_photo" 
            />
            <div slot="title" class="name">{{article.aut_name}}</div>
            <div slot="label" class="release-time">{{article.pubdate | relativeTime}}</div>
            <van-button type="info" round size="small" class="flollow-btn">
                关注
            </van-button>
       </van-cell>
       <!-- 文章内容区域 -->
        <div class="article-content markdown-body" v-html="article.content">
            11
        </div>

    </div>
</template>
<script>
import '@/views/article/github-markdown.css'
import { ArticleContent } from '@/api/article'
// 组件中获取  动态路由的方法
// 方法一： this.$route.params.xxx
// 方法二：props传参
export default {
 name: 'ArticleIndex',
 data(){
     return {
         //文章内容
         article: {}
     }
 },
 props: {
     articleId: {
         type:[String,Number,Object],
         required: true
     }
 },
 created(){
      this.getArticleContent()
 },
 methods: {
    //  获取文章的内容
     async getArticleContent(){
         const { data } = await ArticleContent(this.$route.params.articleId)
         console.log('我是获取文章内容的请求结果');
         console.log(data);
         this.article = data.data
     }
 }
}
</script>

<style lang="less" scoped>
.title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    padding: 14px;
    padding-bottom: 10px;
    background-color: #fff;
    line-height: 30px;
}
.user-info {
    .name {
        font-size: 12px;
        color: #333;
    }
    .release-time {
        font-size: 11px;
        color: #999;
    }
    .avatar {
        margin-right: 10px;
    }
    .flollow-btn {
        width: 65px;
        height: 29px;
    }
}
.article-content {
    background-color: #fff;
}

</style>
